import React, { Component } from "react";
import { Card, Table, Button, Space, message, Modal } from "antd";
import { Icon } from '@ant-design/compatible'
import { reqCategorys, addCategory, updateCategory } from '../../api'

import AddForm from "./add-form";
import UpdateForm from "./update-form";
/**
 * 商品分类管理的首页
 */
export default class Category extends Component {

    constructor(props) {
        super(props);
        this.formRef = React.createRef();
        this.addForm = React.createRef();
    }
    // 只要更新状态，数据就会重新渲染
    state = {
        loading: false,
        categorys: [],    //一级分类列表
        showStatus: 0,
        parentId: '0', // 当前需要显示的分类列表的父分类ID
        parentName: '', // 当前需要显示的分类列表的父分类名称
        pagination: {
            current: 1,
            pageSize: 2,
        },
    }
    // 初始化Table列的数组
    initColums = () => {
        this.columns = [
            {
                title: '分类名称',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '操作',
                width: 800,
                render: (category) => (
                    <Space>
                        <Button type="link" block onClick={() => this.showUpdate(category)}>修改分类</Button>
                        {this.state.parentId === "0" ? <a href="###" onClick={() => { this.showSubCategorys(category) }}>查看子类</a> : null}
                    </Space>
                ),
            },
        ];
    }

    showUpdate = (category) => {

        //保存分类对象
        this.category = category;
        // console.log(category);
        // 更新状态
        this.setState({
            showStatus: 2
        })
    }

    /*
    更新分类
     */
    updateCategory = async () => {

        let form = this.formRef.current.refs.form;

        // antd v4
        form.validateFields().then(async values => {

            console.log(values);

            //隐藏确认框
            this.setState({
                showStatus: 0
            })

            // 准备数据
            const categoryId = this.category._id
            console.log(categoryId);

            const { catName } = values
            // 清除输入数据
            form.resetFields()

            // 2. 发请求更新分类
            const result = await updateCategory({ categoryId, categoryName: catName })
            if (result.status === 0) {
                // 3. 重新显示列表
                this.getCategorys()
            }

        }).catch(info => {
            console.log(info);
        });
    }
    //显示一级分类列表
    showCategorys = () => {
        this.setState({
            parentId: '0',
            parentName: '',
            subCategorys: []
        }, () => { // 在状态更新且重新render()后执行
            //console.log('parentId', this.state.parentId) // '0'
            // 获取二级分类列表显示
            this.getCategorys()
        })
    }
    showSubCategorys = (category) => {
        // console.log(category);
        // 更新状态，异步更新
        this.setState({
            parentId: category._id,
            parentName: category.name
        }, () => {
            //setState之后不能立即获取最新的状态，因为setState是异步更新的
            //console.log("parentId", this.state.parentId);
            //获取分类列表
            this.getCategorys()
        })
        //setState之后不能立即获取最新的状态，因为setState是异步更新的
        //console.log("parentId", this.state.parentId);
        //获取分类列表
        //this.getCategorys()
    }

    // 异步获取一级分类列表
    getCategorys = async () => {

        // 发请求前显示loading
        this.setState({ loading: true })
        const { parentId } = this.state
        const result = await reqCategorys(parentId)

        this.setState({ loading: false })
        if (result.status === 0) {
            const categorys = result.data
            //更新状态
            this.setState({ categorys })
        } else {
            message.error("获取分类列表失败")
        }
    }

    //为第一次render准备数据
    componentWillMount() {
        this.initColums();
    }

    //发ajax异步请求
    componentDidMount() {
        this.getCategorys()
    }

    addCategory = () => {

        let form = this.addForm.current.refs.form;

        // antd v4
        form.validateFields().then(async values => {
            // Do something with value
            console.log("values", values);

            //隐藏确认框
            this.setState({
                showStatus: 0
            })

            // 收集数据, 并提交添加分类的请求
            const { parentId, catName } = values

            // 清除输入数据
            form.resetFields()

            const result = await addCategory(catName, parentId)
            if (result.status === 0) {

                // 添加的分类就是当前分类列表下的分类
                if (parentId === this.state.parentId) {
                    // 重新获取当前分类列表显示
                    this.getCategorys()
                } else if (parentId === '0') { // 在二级分类列表下添加一级分类, 重新获取一级分类列表, 但不需要显示一级列表
                    this.getCategorys('0')
                }
            }
        }).catch(info => {
            console.log(info);
        });
    }

    showAdd = () => {
        this.setState({
            showStatus: 1
        })
    }
    // 添加分类信息    

    // 响应点击取消: 隐藏确定框
    handleCancel = () => {

        // 清除输入数据
        // console.log(this.formRef.current);
        this.formRef.current.refs.form.resetFields();

        // 隐藏确认框
        this.setState({
            showStatus: 0
        })
    }

    handleTableChange = (pagination, filters, sorter) => {
        console.log(pagination);
    };

    render() {
        const { categorys, loading, showStatus, parentId, parentName } = this.state

        // 读取指定的分类
        const category = this.category || {} // 如果还没有指定一个空对象

        // card的左侧
        const title = parentId === '0' ? "一级分类列表" : (
            <span>
                <a href="###" onClick={this.showCategorys}>一级分类列表</a>
                <Icon type="arrow-right" style={{ marginRight: 5 }}></Icon>
                <span>{parentName}</span>
            </span>
        )
        // card的右侧
        const extra = (
            <Button type="primary" onClick={this.showAdd}>
                <Icon type="plus"></Icon>
                添加
            </Button>
        )

        return (
            <div>
                <Card title={title} extra={extra}>
                    <Table
                        dataSource={categorys}
                        columns={this.columns}
                        bordered
                        rowKey="_id"
                        loading={loading}
                        pagination={{defaultPageSize: 3}}
                    />

                    <Modal
                        title="添加分类"
                        visible={showStatus === 1}
                        onOk={this.addCategory}
                        onCancel={this.handleCancel}
                        forceRender={true}
                    >
                        <AddForm ref={this.addForm} categorys={categorys} parentId={parentId} setForm={(form) => { this.form = form }}></AddForm>
                    </Modal>

                    <Modal
                        title="修改分类"
                        visible={showStatus === 2}
                        onOk={this.updateCategory}
                        onCancel={this.handleCancel}
                        forceRender={true}
                    >
                        <UpdateForm ref={this.formRef} categoryName={category.name} setForm={(form) => { this.form = form }}></UpdateForm>
                    </Modal>
                </Card>
            </div>
        );
    }
}